<template>
  <div class='wrap'>
    <div class="content">
    <div class="logo">
      <div class="back" @click="$router.push('/user')"><i class="iconfont icon-cha"></i></div>
      <img :src="logo" style="height: 60px">
    </div>
    <div class="form">
      <!-- 账号密码登录 -->
     <div v-if="status==1">
        <div class="from-type">
        <div>账号密码登录</div>
        <span @click="status=2">验证码快捷登录<i class="iconfont icon-xiangyoujiantou"></i></span>
      </div>
      <van-form @submit="login"  :show-error-message="false">
        <van-field
          v-model="form.account"
          name="用户名"

          placeholder="手机号 / 邮箱"
          :rules="[{ required: true, message: '请填写 手机号 / 邮箱' }]"
        />
        <van-field
          v-model="form.password"
          type="password"
          name="密码"
          placeholder="密 码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">{{!loading ? '登 录' : '登录中...'}}</van-button>
        </div>
      </van-form>
      <div class="other-item">
        <div @click="status=3">忘记密码？</div>
      </div>
     </div>
     <!-- 验证码快捷登录 -->
     <div v-else-if="status==2">
        <div class="from-type">
       <div>验证码快捷登录</div>
        <span @click="status=1">账户密码登录<i class="iconfont icon-xiangyoujiantou"></i></span>
      </div>
      <van-form @submit="LogInToregister"  :show-error-message="false">
        <van-field
          v-model="form.account"
          name="用户名"
          placeholder="手机号 / 邮箱"
          :rules="[{ required: true, message: '请填写 手机号 / 邮箱' }]"
        />
        <van-field
          v-model="form.code"
          center
          clearable
          placeholder="验证码"
          :rules="[{ required: true}]"
        >
          <template #button v-if="status==2">
            <van-count-down v-if="isTime" :time="time" format="ss s" @finish="isTime = false"/>
            <van-button v-else size="mini" type="primary" @click="getVerifyCode" :loading="isSendSmsLoading">获取验证码</van-button>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">{{!loading ? '登 录' : '登录中...'}}</van-button>
        </div>
      </van-form>
     </div>
       <!-- 通过手机/邮箱重设密码 -->
     <div v-else-if="status==3">
        <div class="from-type">
       <div>通过手机/邮箱重设密码</div>
        <span @click="status=1">账户密码登录<i class="iconfont icon-xiangyoujiantou"></i></span>
      </div>
      <van-form @submit="resetPassword"  :show-error-message="false">
        <van-field
          v-model="form.account"
          name="用户名"
          placeholder="手机号 / 邮箱"
          :rules="[{ required: true, message: '请填写 手机号 / 邮箱' }]"
        />
        <van-field
          v-model="form.code"
          center
          clearable
          placeholder="验证码"
          :rules="[{ required: true}]"
        >
          <template #button v-if="status==3">
            <van-count-down v-if="isTime" :time="time" format="ss s" @finish="isTime = false"/>
            <van-button v-else size="mini" type="primary" @click="getVerifyCode" :loading="isSendSmsLoading">获取验证码</van-button>
          </template>
        </van-field>
        <van-field
          v-model="form.password"
          type="password"
          name="新密码"
          placeholder="新密码"
          :rules="[{ required: true }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">{{!loading ? '重设密码' : '重设密码中'}}</van-button>
        </div>
      </van-form>
      <div class="other-item">
              <div @click="status=1">想起密码？</div>
       </div>
     </div>
    </div>
    <div v-if="status!=3" class="other">
        <!-- <el-divider>第三方登录</el-divider> -->
        <ul>
          <a :href="weChatUrl"><li><i class="iconfont icon-weixin"></i></li></a>
          <li><i class="iconfont icon-qq"></i></li>
          <li><i class="iconfont icon-xinlangweibo"></i></li>
          <li><i class="iconfont icon-shejiaotubiao-09"></i> </li>
          <li><i class="iconfont icon-weiruan"></i></li>
          <a :href="githubUrl"><li><i class="iconfont icon-github"></i></li></a>
        </ul>
    </div>
     <div v-if="status!=3"  class="from-reading">
          登录注册即代表同意xx<span>《用户协议》</span>和<span>《隐私协议》</span>
        </div>
  </div>
   </div>
</template>

<script >
import { validMobile, validEmail } from '@/utils/validate.js'
import { mapActions } from 'vuex'
import { getVerifyCode } from '@/api/verifyCode'
export default {
  name: 'Login',
  components: {},
  data () {
    return {
      githubUrl: 'https://github.com/login/oauth/authorize?client_id=88f028142403410abfef&redirect_uri=http://127.0.0.1:8888/dashboard',
      weChatUrl: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd4a837c38b866355&redirect_uri=http://127.0.0.1:8888/dashboard&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect',
      status: 2,
      loading: false,
      isTime: false, // 显示倒计时
      isSendSmsLoading: false,
      time: 1000 * 60,
      logo: require('@/assets/loginLogo.png'),
      form: {
        account: '18684868151',
        password: '123456',
        code: ''
      }
    }
  },
  created () {},
  methods: {
    ...mapActions(['user/login', 'user/quick', 'user/quickUpdatePassword']),
    async weChatLogin () {
      // const weChatCode = window.location.href.split('?code=')[1].split('&')
      // const res = await weChatLogin({ code: weChatCode[0] })
      // console.log(res)
      // this.$message.success('WeChat登录成功')
    },
    async gitHubLogin () {
      // const str = window.location.href.substr(window.location.href.indexOf('code=') + 5)
      // const Code = str.substr()
      // const res = await gitHubLogin({ code: Code })
      // console.log(res)
      // this.$message.success('gitHub登录成功')
    },
    // 获取验证码
    async getVerifyCode () {
      if (!validMobile(this.form.account) && !validEmail(this.form.account)) {
        return this.$toast('请输入有效的账号')
      }
      const VerifyCode = await getVerifyCode({ account: this.form.account })
      this.isSendSmsLoading = true // 防止网络满用户多次点击发送验证码
      this.$toast('验证码发送成功!')
      console.log(VerifyCode)
      this.isTime = true// 短信发出去了隐藏按钮
      this.isSendSmsLoading = false // 无论验证码发送成功还是失败最后都要关闭loading
    },
    // 账号密码登录
    async login () {
      this.loading = true
      try {
        await this['user/login'](this.form)
        // 清除layout的缓存，让它重新渲染
        this.$store.commit('index/REMOVE_CACHEPAGE', 'TabBar')
        // 登录成功，跳转回原来的页面
        this.$router.push(this.$route.query.redirect || '/')
        this.form = {}
      } catch (error) {
        this.$toast(error.response.data.message)
      }
      this.loading = false
    },
    // 验证码快捷登录 或注册
    async LogInToregister () {
      if (!validMobile(this.form.account) && !validEmail(this.form.account)) {
        return this.$toast('请输入有效的账号')
      }
      this.loading = true
      try {
        await this['user/quick'](this.form)
        // 清除layout的缓存，让它重新渲染
        this.$store.commit('REMOVE_CACHEPAGE', 'TabBar')
        // 登录成功，跳转回原来的页面
        this.$router.push(this.$route.query.redirect || '/')
        this.form = {}
      } catch (error) {
        this.$toast(error.response.data.message)
      }
      this.loading = false
    },
    // 验证码快捷修改密码
    async resetPassword () {
      this.loading = true
      try {
        await this['user/quickUpdatePassword'](this.form)
        this.$toast('重置密码成功!')
        this.form = {}
      } catch (error) {
        this.$toast(error.response.data.message)
      }
      this.loading = false
      this.status = 1
    }
  }
}
</script>
<style lang="scss" scoped>
.logo{
  position: relative;
  padding:100px 0px 100px 0px;
  .back{
    position: absolute;
    top:20px;
    left:20px;
    .icon-cha{
      font-size:24px;
    }
  }
}
.form{
  .from-type{
    display:flex;
    justify-content:space-between;
    height: 20px;
    line-height: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    font-size:16px;
    div:nth-child(1){
      font-size:20px;
      font-weight: 500;
      border-left: 3px solid #328BF9;
      padding-left:5px;
    }
     span{
       color: #328BF9;
       .icon-xiangyoujiantou{
         font-size:13px;
       }
    }
  }
}
.other-item{
   display:flex;
    justify-content:space-between;
    margin-bottom: 20px;
    margin-left: 20px;
    font-size:16px;
 }
.other{
  position:absolute;
  bottom: 40px;
  left:75px;
  margin-bottom: 20px;
  ul{
    display:flex;
    justify-content: space-evenly;
    list-style:none;
    li:hover{
      border:1px solid #25abef;
    }
    li{
      display: flex;
      align-items: center;
      justify-content: center;
      // cursor: pointer;
      margin: 0px 2px;
      width: 33px;
      height: 33px;
      border:1px solid #e5e7e8;
      border-radius: 100px;
    }
  }
    .iconfont{
      font-size:18px;
    }
    .icon-weixin{
      color: rgb(74, 221, 51);
    }
    .icon-qq{
      //  font-size:16px;
      color: rgb(87, 139, 222);
    }
    .icon-xinlangweibo{
      color: rgb(244, 94, 75);
    }
    .icon-shejiaotubiao-09{
      color: rgb(93, 140, 241);
    }
    .icon-weiruan{
      color: rgb(93, 140, 241);
    }
     .icon-github{
      color: rgb(10, 24, 54);
    }
}
.from-reading{
  position:absolute;
  bottom: 20px;
  left: 15%;
    font-size: 12px;
    text-align: center;
    span{
      color: #328BF9;
    }
}
</style>
